<template>
    <div class="container">
      <div class="marketMsg">
        <div class="head"><MarketHeader/></div>
        <div class="goods">
          <MarketGoods 
          v-for="item in filterData" :key="item.id" 
          :item="item"
          @add="add"
          @minus="minus"/>
        </div>
      </div>
    </div>
    <div class="car">
      <ShopCar :items="items"/>
    </div>
  </template>
  
  <script>
import { computed, onBeforeUnmount, onMounted, onUpdated, provide, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import MarketGoods from '../../Commodity/components/MarketGoods.vue';
import MarketHeader from '../../Commodity/components/MarketHeader.vue';
import ShopCar from '../../Commodity/components/ShopCar/'


  export default {
    name:'Commodity',
    components:{MarketHeader,MarketGoods,ShopCar},
    setup(){
      //跳转到此页面重置滚动条
      onMounted(()=>{
        window.scrollTo(0,0)
      })

      const route = useRoute()
      //该超市的信息
    //   let item = route.query.obj
    //   let marketMsg = reactive(JSON.parse(item))
    //   console.log('路由传来的超市信息',marketMsg)
      //该超市的全部商品
      let items = reactive([ 
                    {id:'001',name:'苹果',exsale:'567',discount:'5',price:6,select:false,keyword:'fruit',selectSum:'0',select_settle:false},
                    {id:'002',name:'李子',exsale:'685',discount:'3',price:4,select:false,keyword:'fruit',selectSum:'0',select_settle:false},
                    {id:'003',name:'葡萄',exsale:'4561389',discount:'8',price:2,select:false,keyword:'fruit',selectSum:'0',select_settle:false},
                    {id:'004',name:'芒果',exsale:'789056',discount:'6',price:8,select:false,keyword:'fruit',selectSum:'0',select_settle:false},
                    {id:'005',name:'矿泉水',exsale:'297',discount:'8',price:1,select:false,keyword:'drink',selectSum:'0',select_settle:false},
                    {id:'007',name:'抽纸',exsale:'2876',discount:'9',price:7,select:false,keyword:'daily',selectSum:'0',select_settle:false},
                    {id:'008',name:'花露水',exsale:'972',discount:'9',price:25,select:false,keyword:'daily',selectSum:'0',select_settle:false},
                    {id:'009',name:'洗面奶',exsale:'46',discount:'8',price:74,select:false,keyword:'daily',selectSum:'0',select_settle:false},
                    {id:'010',name:'洗发水',exsale:'4246',discount:'9',price:62,select:false,keyword:'daily',selectSum:'0',select_settle:false},
                    {id:'011',name:'杯子',exsale:'3573',discount:'7',price:45,select:false,keyword:'daily',selectSum:'0',select_settle:false},
                    {id:'012',name:'风扇',exsale:'262',discount:'8',price:123,select:false,keyword:'furniture',selectSum:'0',select_settle:false},
                    {id:'013',name:'薯片',exsale:'2634562',discount:'9',price:6,select:false,keyword:'snack',selectSum:'0',select_settle:false},
                    {id:'014',name:'娃娃菜',exsale:'78762',discount:'9',price:3,select:false,keyword:'vegetable',selectSum:'0',select_settle:false},
                    {id:'015',name:'眉笔',exsale:'272',discount:'7',price:79,select:false,keyword:'makeup',selectSum:'0',select_settle:false},
                    {id:'016',name:'狗粮',exsale:'8782',discount:'9',price:20,select:false,keyword:'pet',selectSum:'0',select_settle:false},
                    {id:'017',name:'冰红茶',exsale:'9999',discount:'9',price:4,select:false,keyword:'drink',selectSum:'0',select_settle:false},
                    {id:'018',name:'口红',exsale:'953',discount:'9',price:75,select:false,keyword:'makeup',selectSum:'0',select_settle:false},
                    {id:'020',name:'洗衣机',exsale:'789',discount:'9',price:799,select:false,keyword:'furniture',selectSum:'0',select_settle:false},
                    {id:'021',name:'空调',exsale:'985',discount:'9',price:1999,select:false,keyword:'furniture',selectSum:'0',select_settle:false},
                    {id:'023',name:'黄瓜',exsale:'99566',discount:'7',price:3,select:false,keyword:'vegetable',selectSum:'0',select_settle:false},
                    {id:'024',name:'猫条',exsale:'1299',discount:'8',price:1,select:false,keyword:'pet',selectSum:'0',select_settle:false},
                    {id:'025',name:'啤酒',exsale:'9876',discount:'9',price:9,select:false,keyword:'drink',selectSum:'0',select_settle:false},
                    {id:'026',name:'猫砂盆',exsale:'396',discount:'7',price:100,select:false,keyword:'pet',selectSum:'0',select_settle:false},
                    {id:'027',name:'腮红',exsale:'867',discount:'9',price:24,select:false,keyword:'makeup',selectSum:'0',select_settle:false},
                    {id:'028',name:'绿豆芽',exsale:'24567',discount:'9',price:3,select:false,keyword:'vegetable',selectSum:'0',select_settle:false},
                    {id:'029',name:'小米14',exsale:'99867',discount:'9.5',price:4399,select:false,keyword:'digital',selectSum:'0',select_settle:false},
                    {id:'030',name:'IQOO neo9',exsale:'64567',discount:'9',price:1999,select:false,keyword:'digital',selectSum:'0',select_settle:false},
                    {id:'031',name:'Iphone 16',exsale:'567',discount:'9',price:6799,select:false,keyword:'digital',selectSum:'0',select_settle:false},
                    {id:'032',name:'小米pad6',exsale:'4567',discount:'9',price:1899,select:false,keyword:'digital',selectSum:'0',select_settle:false},
                    {id:'033',name:'Redmi Buds 6',exsale:'7227',discount:'9',price:99,select:false,keyword:'digital',selectSum:'0',select_settle:false}
                  ])
      //初步选择的商品
      let selectItems = computed(()=>{return items.filter((t)=>t.select===true)})
      provide('selectItems',selectItems)

      //获取购物车里勾选的商品
      let selectedItemsNum = computed(()=>{return items.filter((t)=>t.select_settle===true).length})

      //关键字默认为全部
    //   const keyword = ref('all')
      const msg = reactive(JSON.parse(route.query.msg))
      const keyword = msg.keyword

      //根据关键字过滤数据
      const filterData =computed(()=>{
        let tempArr = []
        if(keyword.value === 'all'){
          tempArr = items
          return tempArr
        }
        for(let i=0;i<items.length;i++){
          if(items[i].keyword === keyword.value){
            tempArr.push(items[i])
          }
        }
        return tempArr
      })

      //对应商品数增加
      function add(value){
        let index = items.findIndex(item=>item.id === value)
        items[index].selectSum++
        items[index].select=true
        items[index].select_settle=true
      }
      //对应商品数减少
      function minus(value){
        let index = items.findIndex(item=>item.id === value)
        items[index].selectSum--
        //减到0了，重置该商品数目和勾选信息
        if(items[index].selectSum==0){
          items[index].select=false
          items[index].select_settle=false
        }
      }

      return {
        route,items,keyword,filterData,selectItems,selectedItemsNum,add,minus
      }
    },
  }
  </script>
  
  <style scoped>
    .container {
      margin-left: auto;
      margin-right: auto;
      width: 80%;
      background-color: #F56C6C;
      border-radius: 8px;
      min-width: 500px;
    }
    .head {
      overflow: hidden;
    }
    .marketMsg {
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      width: 73vw;
      border-radius: 10px;
    }
    .goods {
      margin-top: 10px;
      display: flex;
      flex-wrap:wrap;
      min-width: 320px;
    }
    .goods:nth-child(odd){
      margin-right: 10px;
    }
    .car {
      position: fixed;
      right: 1%;
      bottom: 10%;
    }
    .filter {
      margin-top: 3%;
      overflow: auto;
    }
  </style>